import 'package:cbec_app/pages/my/controller/operate_six_password_crt.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';

class ForgetSixPassword extends GetView<OperateSixPasswordCrt> {
  const ForgetSixPassword({super.key});

  @override
  Widget build(BuildContext context) {
    controller.fetchVerifyCode();
    return GetBuilder<OperateSixPasswordCrt>(builder: (controller) {
      return Scaffold(
        appBar: AppBar(
          title: const Text(
            '修改支付密码',
            style: TextStyle(fontSize: 14),
          ),
          centerTitle: true, // 标题居中显示
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios), // 自定义返回按钮图标
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ),
        body: controller.isFinishStep1 ? buildInputPasswordWidget() : _buildForgetMsgCodeWidget(controller),
      );
    });
  }

  Widget buildInputPasswordWidget() {
    final defaultPinTheme = PinTheme(
      width: 48,
      height: 48,
      textStyle: const TextStyle(
        fontSize: 20,
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
    );

    final focusedPinTheme = defaultPinTheme.copyWith(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue),
        borderRadius: BorderRadius.circular(8),
      ),
    );

    final submittedPinTheme = defaultPinTheme.copyWith(
      decoration: BoxDecoration(
        color: Colors.blue.shade100,
        borderRadius: BorderRadius.circular(8),
      ),
    );

    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          Text(
            '请输入6位支付密码',
            style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14, color: Tools.fromHex('#666666')),
          ),
          const SizedBox(height: 40),

          //验证码输入OTP
          Pinput(
            length: 6,
            defaultPinTheme: defaultPinTheme,
            focusedPinTheme: focusedPinTheme,
            submittedPinTheme: submittedPinTheme,
            showCursor: true,
            onCompleted: (pin) {
              //print("输入完成: $pin");
              controller.updatePassword(pin);
            },
          ),
          const SizedBox(height: 20),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '避免使用连续或重复的数字，类似“123456” ”112233“',
                  style: TextStyle(fontWeight: FontWeight.w400, fontSize: 10, color: Tools.fromHex('#999999')),
                ),
                Text(
                  '避免使用手机号，证件号中的连续数字',
                  style: TextStyle(fontWeight: FontWeight.w400, fontSize: 10, color: Tools.fromHex('#999999')),
                ),
                Text(
                  '避免使用连续已绑定银行卡卡号中的连续数字',
                  style: TextStyle(fontWeight: FontWeight.w400, fontSize: 10, color: Tools.fromHex('#999999')),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Container _buildForgetMsgCodeWidget(OperateSixPasswordCrt controller) {
    final defaultPinTheme = PinTheme(
      width: 48,
      height: 48,
      textStyle: const TextStyle(
        fontSize: 20,
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
    );

    final focusedPinTheme = defaultPinTheme.copyWith(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue),
        borderRadius: BorderRadius.circular(8),
      ),
    );

    final submittedPinTheme = defaultPinTheme.copyWith(
      decoration: BoxDecoration(
        color: Colors.blue.shade100,
        borderRadius: BorderRadius.circular(8),
      ),
    );

    return Container(
      alignment: Alignment.topCenter,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            '输入短信验证码',
            style: TextStyle(fontWeight: FontWeight.w400, fontSize: 30, color: Tools.fromHex('#333333')),
          ),
          const SizedBox(height: 20),
          Text(
            '我们已经发送短信验证码到你的手机号',
            style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14, color: Tools.fromHex('#666666')),
          ),
          const SizedBox(height: 5),
          Text(
            controller.encodePhoneNumber,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Tools.fromHex('#000000')),
          ),
          const SizedBox(height: 40),

          //验证码输入OTP
          Pinput(
            length: 6,
            defaultPinTheme: defaultPinTheme,
            focusedPinTheme: focusedPinTheme,
            submittedPinTheme: submittedPinTheme,
            showCursor: true,
            onCompleted: (pin) {
              //print("输入完成: $pin");
              controller.updateMsgCode(pin);
            },
          ),
          const SizedBox(height: 20),
          controller.isCountingDown
              ? Text(
                  '${controller.countdown}s后重发验证码',
                  style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14, color: Tools.fromHex('#F83F2D')),
                )
              : GestureDetector(
                  onTap: () {
                    controller.fetchVerifyCode();
                  },
                  child: Text(
                    '发送验证码',
                    style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14, color: Tools.fromHex('#666666')),
                  ),
                ),
        ],
      ),
    );
  }
}
